<template>
	<view class="detail colorNight">
		<!-- <view class="fixbg" :style="{'background-image':'url('+ songDetail.al.picUrl +')'}"></view> -->
		<view class="fixbg"></view>
		<musicHead :title="songDetail.name" :icon="true" color="white"></musicHead>
		<view class="container" v-show="!isLoding">
			<scroll-view scroll-y="true">
				<!-- <view class="paly-bar"> -->
					<view class="detail-play">
						<image :class="{'detail-play-run' : isPlayRotate}" :src="songDetail.al.picUrl" mode=""></image>
						<text @tap="handleToPlay()" class="iconfont" :class="iconPlay"></text>
						<!-- <text class="iconfont icon-bofang1"></text> -->
					</view>
				<!-- </view> -->
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:'translateY('+ -(lyricIndex -1) * 82 + 'rpx)'}">
						<view 
						class="detail-lyric-item"
						:class="{active : lyricIndex == index}"
						v-for="(item,index) in songLyric" :key="index"
						>
							{{item.lyric}}
						</view>
						<!-- <view class="detail-lyric-item active">111111</view> -->
					</view>
				</view>
				<!-- 可能喜欢 -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index" @tap="handleToSimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl || ''" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>{{item.name}}</view>
							<view>{{item.album.artists[0].name}}--{{item.name}}</view>
						</view>
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
				<!-- 精彩评论 -->
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{item.user.nickname}}</view>
									<view>{{item.time | formatTime }} &nbsp; {{ item.likedCount | formatCount }}<text class="iconfont icon-zan1">&emsp;</text></view>
									
								</view>
							</view>
							<view class="detail-comment-text">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musicHead from "@/components/musicHead/musicHead.vue"
	import { songDetail,songSimi,songComment,songLyric,songUrl} from "@/common/api.js"
	
	export default {
		comments:{
			musicHead,
		},
		data() {
			return {
				// 歌曲信息
				songDetail:{
					al:{
						picUrl:""
					}
				},
				//相似歌曲
				songSimi:[],
				//评论
				songComment:[],
				//歌词
				songLyric:[],
				//歌词选中器
				lyricIndex:0,
				//播放地址
				musicPlayUrl:"",
				iconPlay: 'icon-zanting1',
				isPlayRotate : true,
				isLoding:true
			}
		},
		methods:{
			formatTimeToSecond(value){
				let arr = value.split(':')
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			handleToPlay(){
				if(this.bgAudioManager.paused){
					this.bgAudioManager.play()
				}else{
					console.log(222);
					this.bgAudioManager.pause()
				}
			},
			listenLyricIndex(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for(let i=0;i<this.songLyric.length;i++){
						if(this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length-1].time){
							this.lyricIndex = this.songLyric.length -1
							console.log(this.lyricIndex);
							break
						}
						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i+1].time){
							this.lyricIndex = i
						}
					}
				},500)
			},
			cancelLyricIndex(){
				clearInterval(this.timer)
			},
			handleToSimi(id){
				this.getMusic(id)
			},
			getMusic(songId){
				
				this.$store.commit("setNextId",songId)
				uni.showLoading({
					title:'加载中'
				})
				this.isLoding = true
				Promise.all([
					songDetail(songId),
					songSimi(songId),
					songComment(songId),
					songLyric(songId),
					songUrl(songId),
					]).then(res =>{
					
					if(res[0][1].data.code == '200'){
						this.songDetail = res[0][1].data.songs[0]
						// console.log(this.songDetail)
					}
					//相似歌曲
					if(res[1][1].data.code == '200'){
						this.songSimi = res[1][1].data.songs
						// console.log(this.songSimi,"songSimi")
					}
					//评论
					if(res[2][1].data.code == '200'){
						console.log(res[2][1]);
						this.songComment = res[2][1].data.hotComments
						console.log(this.songComment,"songComment")
					}
					//歌词
					if(res[3][1].data.code == '200'){
						let lyric = res[3][1].data.lrc.lyric
						let re = /\[([^\]]+)\]([^\[]+)/g
						let result = []
						lyric.replace(re,($0,$1,$2)=>{
							result.push({"time" : this.formatTimeToSecond($1) , "lyric" : $2})
						})
						this.songLyric = result
					}
					//播放
					if(res[4][1].data.code == '200'){
						// #ifdef H5
						if(!this.bgAudioManager){
							this.bgAudioManager = uni.createInnerAudioContext()
						}
							this.iconPlay = 'icon-bofang1'
							this.isPlayRotate = false
						// #endif
						// #ifdef MP-WEIXIN
							this.bgAudioManager = uni.createInnerAudioContext()
							this.bgAudioManager.title = this.songDetail.name;
						// #endif
						
						// this.bgAudioManager = uni.getBackgroundAudioManager();
						// console.log(this.songDetail.name);
						// this.bgAudioManager.title = this.songDetail.name;
						this.bgAudioManager.src = res[4][1].data.data[0].url
						this.musicPlayUrl = res[4][1].data.data[0].url
						this.listenLyricIndex()
						this.bgAudioManager.onPlay(()=>{
							this.iconPlay = 'icon-zanting1'
							this.isPlayRotate = true
							this.listenLyricIndex()
						})
						this.bgAudioManager.onPause(()=>{
							this.iconPlay = 'icon-bofang1'
							this.isPlayRotate = false
							this.cancelLyricIndex()
						})
						this.bgAudioManager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId)
						})
					}
				})
				this.isLoding = false
				uni.hideLoading()
			},
		},
		onLoad(options){
			this.getMusic(options.songId)
			// this.bgAudioManager.destroy()
		},
		onUnload(){
			this.cancelLyricIndex()
			// #ifdef H5
				this.bgAudioManager.destroy()
			// #endif
		},
		onHide(){
			this.cancelLyricIndex()
		},
	}
</script>

<style lang="less" scoped>
	.detail-play{
		width: 580rpx;
		height: 580rpx;
		background: url("../../static/special/disc.png");
		background-size: cover;
		margin: 200rpx auto 0;
		position: relative;
		image{
			width: 370rpx;
			height: 370rpx;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			animation: 10s linear move infinite;
			animation-play-state: paused;
		}
		.detail-play-run{
			animation-play-state: running;
		}
		@keyframes move {
			form{transform: rotate(0deg);}
			to{transform: rotate(360deg);}
		}
		text{
			width: 100rpx;
			height: 100rpx;
			font-size: 100rpx;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0rpx;
			margin: auto;
		}
	}
	.detail-lyric{
		font-size: 32rpx;
		height: 246rpx;
		line-height: 82rpx;
		text-align: center;
		overflow: hidden;
		margin-top: 40rpx;
		.detail-lyric-wrap{
			transition: .5s;
			.detail-lyric-item{
				height: 82rpx;
			}
			.active{
				color: #9bacd8;
			}
		}
	}
	.detail-like{
		margin: 0 30rpx;
		.detail-like-head{
			font-size: 36rpx;
			margin: 50rpx 0;
		}
		.detail-like-item{
			display: flex;
			margin-bottom: 20rpx;
			.detail-like-img{
				width: 82rpx;
				height: 82rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.detail-like-song{
				flex: 1;
				view:nth-child(1){
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}
				view:nth-child(2){
					font-size: 22rpx;
				}
			}
			text{
				line-height: 82rpx;
				font-size: 50rpx;
			}
		}
	}
	.detail-comment{
		margin: 0 30rpx;
		.detail-comment-head{
			font-size: 36rpx;
			margin: 50rpx 0;
		}
		.detail-comment-item{
			margin-bottom: 28rpx;
			display: flex;
			.detail-comment-img{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 18rpx;
				object-fit: cover;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.detail-comment-content{
				flex: 1;
				.detail-comment-title{
					display: flex;
					margin-bottom: 20rpx;
					.detail-comment-name{
						width: 100%;
						display: flex;
						view:nth-child(1){width: 50%; font-size: 26rpx;}
						view:nth-child(2){flex: 1; text-align: right; font-size: 20rpx;}
					}
				}
			}
			.detail-comment-text{
				font-size: 28rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #c6c2bf;
			}
		}
	}
</style>